<template>
	<view>
		<view style="width: 100%;display: flex;justify-content: space-between;height: 100upx;line-height: 100upx;">
			<view style="position: relative;margin-left: 20upx;">
				<image style="width: 40upx;height: 40upx;position: absolute;top: 32upx;left: 0;" src="../../static/65.png" mode=""></image>
				<text style="margin-left: 50upx;">规则</text>
			</view>
			<view style="font-size: 38upx;font-weight: bold;">
				组团
			</view>
			<view @click="navTo('/pages/ctjl/ctjl')" style="background-image: url(../../static/89.png);background-size:170upx 50upx;background-repeat: no-repeat;background-position: center;width: 170upx;text-align: center;">
				我的组团
			</view>
		</view>
		<scroll-view scroll-x="true" :scroll-left="scrollLeft" style="height: 130upx;width: 100%;overflow: hidden;white-space: nowrap;" >
			<view style="width: 220upx;height: 130upx;display: inline-block;text-align: center;"
				v-for="(item,index) in timelist" :key="index"
					@ontouchstart="ontouchstart()"
					@ontouchend="ontouchend()"
				>
				<view style="font-size: 32upx;height: 70upx;line-height: 80upx;">
					{{item.h}}:{{item.m>9 ? item.m : '0' + item.m}}:00
				</view>
				<view style="font-size: 24upx;text-align: center;">
					<view style="border-radius: 30upx;width: 140upx;margin: 0 auto;" :class="item.maskState===1 ? 'bgchg' : 'none'">
						{{item.status}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view style="position: relative;height: 110upx;line-height: 80upx;" >
			<view style="display: flex;justify-content: space-between;margin: 0 24upx;">
				
			</view>
			
		</view> -->
		<!-- 背景图没设计暂时不打开 -->
		
		<view style="width: 100%;height: 100upx;margin: 50upx 0;display: flex;">
			<!-- <button @click="sd_cantuan" :disabled="disable" style="width: 40%;background: url(../../static/46.png) no-repeat center; border-radius: 80upx;color: #000;border: 1px solid #fff;font-weight: 555;text-align: center;height: 90upx;margin: 0 auto;line-height: 90upx;font-size: 32upx;">手动参团</button> -->
			<view @click="jumpno" :disabled="disable" style="width: 40%;background: url(../../static/46.png) no-repeat center;border-radius: 80upx;color: #000;border: 1px solid #fff;font-weight: 555;text-align: center;height: 90upx;margin: 0 auto;line-height: 90upx;font-size: 32upx;">组团销售</view>
		</view>
		<view style="width: 90%;height: 300upx;margin-left: 5%;border-radius: 20upx;overflow: hidden;">
			<image src="../../static/152.jpg" style="width: 100%;height: 300upx;" mode=""></image>
		</view>
		<view class="detail-desc" style="margin-top: 0;padding-top: 20upx;">
			<view class="d-header" style="font-weight: 555;height: 110upx;line-height: 110upx;">
				<text>淘米源使用流程</text>
			</view>
			<view style="width: 90%;margin: 0upx auto 30upx;opacity: .8;background-color: #FF5555;border-radius: 8upx;border: 1px solid #f00;">
				<view style="border: 1px solid #FF3333;padding: 30upx;">
					<view>1.会员购买商品获得分红券，分红券长期有效；</view>
					<view>2.每天早上9:30全网自动随机匹配，晚上22:30截止;</view>
					<view>3.每30人匹配为一团，销售三瓶则匹配成功;</view>
					<view>4.匹配成功，消耗一张分红券，同时获得30元的销售分红；</view>
					<view>5.每轮未匹配成功，则分红券直接退回账户，参与下轮匹配；</view>
				</view>
			</view>
		</view>
		
		<number-jpan :length="6" @closeChange="closeChange($event)" ref="numberPad"></number-jpan>
	</view>
</template>

<script>
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		data() {
			return {
				paypass:'',
				openid:'',
				hr: 0,
				min: 0,
				sec: 0,
				h: 0,
				m: 0,
				s: 0,
				timelist: [
					{h: 9,m: 30},{h: 10,m: 30},{h: 11,m: 30},
					{h: 12,m: 30},{h: 13,m: 30},{h: 14,m: 30},
					{h: 15,m: 30},{h: 16,m: 30},{h: 17,m: 30},
					{h: 18,m: 30},{h: 19,m: 30},{h: 20,m: 30},
					{h: 21,m: 30},{h: 22,m: 30}
				],
				scrollLeft:100,
				disable: false
			}
		},
		components: {
			uniCountdown,
			numberJpan
		},
		onLoad: function () {
			uni.getStorage({
			 key: 'openid',
			 success: (res) => {
			  this.openid = res.data
			  this.setAjax();
			 },
			 fail: () => {
				uni.navigateTo({
					url: '../login/login'
				});
			 }
			});
		},
		methods: {
			setAjax() {
				var myDate = new Date();
				// console.log(this.timelist)
				this.h = myDate.getHours();
				
				this.m = myDate.getMinutes();
				this.s = myDate.getSeconds();
				this.h = this.m >= 30 ? (this.h + 1) : this.h
				this.m = 30
				// if (this.h >=8 && this.h<=21) {
				// 	 if (this.h% 2 === 0){
				// 		// console.log("这个数是偶数");
				// 		if (this.m<40){
				// 			this.m = 40
				// 		} else {
				// 			this.h +=1
				// 			this.m = 20
				// 		}
				// 	} 
				// 		else if (this.h % 2 === 1){
				// 		// console.log("这个数是奇数");
				// 		if (this.m<20){
				// 			this.m = 20
				// 		} else {
				// 			this.h+=1
				// 			this.m = 0
				// 		}
				// 	}
				// }
				let timelist = this.timelist
				for (var i=0; i<timelist.length; i++) {
					if (timelist[i].h < this.h) {
						timelist[i].status = '已开奖'
						timelist[i].maskState = 0
					}
					if (timelist[i].h <= this.h && timelist[i].m < this.m) {
						timelist[i].status = '已开奖'
						timelist[i].maskState = 0
					}
					if (timelist[i].h == this.h && timelist[i].m == this.m) {
						timelist[i].status = '进行中'
						timelist[i].maskState = 1
					}
					if (timelist[i].h > this.h) {
						timelist[i].status = '即将分红'
						timelist[i].maskState = 0
					}
					if (timelist[i].h >= this.h && timelist[i].m > this.m) {
						timelist[i].status = '即将分红'
						timelist[i].maskState = 0
					}
				}
				this.timelist = timelist
				
				// 倒计时
				if (this.h>=9 && this.h<=23) { // 当天的时间选定范围
					// this.min = 9 - myDate.getMinutes()%10
					// this.sec = 60 - this.s
					if (this.h>=9) {
						this.scrollLeft = ((this.h-10)*6) * 110/4 - 200
						console.log(this.scrollLeft)
					}
				}
				
				
				// console.log(this.h)
				// uni.request({
				// 	url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=shop.category&app=1',
				// 	success: res => {
				// 	},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
			},
			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
			open(){
				this.$refs.numberPad.open()//打开数字输入框
				//this.$refs.numberPad.close()//关闭数字输入框
			},
			closeChange(res){
				console.log({res})
				this.paypass = res
				this.sd_cantuan()
			},
			sd_cantuan(){
				var o = this
				var delay = (Math.random()*2).toFixed(3)
				var data = {
						'openid': this.openid,
						'paypass': this.paypass,
						'delay': delay
					}
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
							if(res.data.error==2){
								uni.showToast({
									title: res.data.message,
									icon:"none"
								});
								setTimeout(function() {
									uni.switchTab({
										url:'/pages/cart/cart'
									})
								}, 2000);
								
								return
							}
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon:"none"
							});
							o.disable = true
							setTimeout(function() {
								o.disable = false
							}, 3000);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			timeup () {
				this.setAjax()
			},
			ontouchstart () {
				console.log(111)
			},
			ontouchend () {
				console.log(222)
			},
			jumpno () {
				var k = this
				uni.showModal({
				    title: '提示',
				    content: '确认自动参团',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
										var data1 = {
												'openid': k.openid,
											}
										uni.request({
											url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.autopt&app=1',
											method: 'POST',
											data: data1,
											header:{'Content-Type':'application/x-www-form-urlencoded'},
											success: res => {
												console.log(res)
												if(res.data.error==2){
													uni.showToast({
														title: res.data.message,
														icon:"none"
													});
													setTimeout(function() {
														uni.switchTab({
															url:'/pages/cart/cart'
														})
													}, 2000);
													
													return
												}
													uni.showToast({
														title: res.data.message,
														duration: 2500,
														icon:"none"
													});
													k.disable = true
													setTimeout(function() {
														k.disable = false
													}, 3000);
											},
											fail: () => {},
											complete: () => {}
										});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.bgchg {
		background-color: #fff;color: #FF5555;
	}
	.none {}
	page {color: #fff;background-image: url(../../static/21.jpg);background-size: 100%;background-position: top;}
 .detail-desc{
 	.d-header{
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 80upx;
 		position: relative;
 		text{
 			padding: 0 50upx;
 			position: relative;
 			z-index: 1;
 		}
		&:before{
			position: absolute;
			left: 54%;
			top: 50%;
			transform: translateX(75upx);
			width: 20upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #fff;
		}
 		&:after{
 			position: absolute;
 			left: 46%;
 			top: 50%;
 			transform: translateX(-100upx);
 			width: 20upx;
 			height: 0;
 			content: '';
 			border-bottom: 1px solid #fff;
 		}
 	}
 }
</style>
